<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table {
				border: 1px orange solid;
				width: 60%;
				margin: 0 auto;
				border-collapse: collapse;
			}

			table th {
				border: 1px orange solid;
				padding: 10px;
			}

			table td {
				border: 1px orange solid;
				padding: 10px;
			}

			/* table tr:nth-child(2n) {
				background-color: azure;
			} */

			/* table tr:nth-child(2n+1) {
				background-color: beige;
			} */

			table tr:nth-child(1) {
				background-color: orange;
			}

			/* 奇数 */
			.odd {
				background-color: beige;
			}

			/* 偶数 */
			.even {
				background-color: bisque;
			}

			.cur {
				background-color: aquamarine;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th><input type="checkbox">全选</th>
				<th>日期</th>
				<th>姓名</th>
				<th>地址</th>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>2022-10-20</td>
				<td>博为峰</td>
				<td>上海</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>2022-10-20</td>
				<td>博为峰</td>
				<td>上海</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>2022-10-20</td>
				<td>博为峰</td>
				<td>上海</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>2022-10-20</td>
				<td>博为峰</td>
				<td>上海</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>2022-10-20</td>
				<td>博为峰</td>
				<td>上海</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>2022-10-20</td>
				<td>博为峰</td>
				<td>上海</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>2022-10-20</td>
				<td>博为峰</td>
				<td>上海</td>
			</tr>
		</table>
		<script type="text/javascript">
			//获取所有的tr对于DOM对象(数组)
			var tr = document.querySelectorAll("tr");
			//遍历(Array内置对象forEach方法)

			//保存样式
			var original = "";
			tr.forEach(function(val, index, array) {
				//val是tr对于的DOM对象添加样式
				if (index != 0) {
					if (index % 2 == 0) { //偶数
						val.className = "even";
					} else { //奇数
						val.className = "odd";
					}
				}
				//tr获取焦点时
				val.addEventListener('mouseenter', function() {
					//先保存tr的样式
					original = this.className;
					//添加样式
					this.className = "cur";
				});
				//tr失去焦点时
				val.addEventListener('mouseleave', function() {
					this.className = original;
				});
				//事件源 事件类型  处理函数
			})
		</script>
		<script type="text/javascript">
			//获取第一个input节点对象
			var input = window.document.querySelector("input");
			input.addEventListener('click', function() {
				//获取选择状态checked
				var check = input.checked;
				// 获取所有input节点对象(数组)
				var inputAll = document.querySelectorAll("input");
				//遍历
				inputAll.forEach(function(val, index) {
					if (index != 0) {
						//设置选中状态(除全选)
						val.checked = check;
					}
				})
			});
		</script>
		<script type="text/javascript">
			//1.注册事件click(除全选)
			//2.判断其它input是否选中,如果选中，则全选选中，如果没有选中，则全选不选中
			
			//获取全选DOM对象
			var allCheck = document.querySelector("input");
			//获取所有input节点对象(类似数组)
			var it = document.querySelectorAll('input');
			//转数组对象
			it = Array.from(it);
			it.forEach(function(val, index, array) { //val是当前数组中遍历到的input节点对象
				if (index != 0) { //排除全选
					//注册事件click
					val.addEventListener('click', function() {
						//查找所有input节点对象中没有选中的input节点对对象，如果找到，则返回此input节点对象，否则返回undefined
						var uncheck = it.find(function(val2, index2) {
							if (index2 != 0) { //排除全选
								return val2.checked == false;
							}
						});

                        //input节点对象就是true
						if (uncheck) { //有,没有被勾选的
							allCheck.checked = false;
						} else { //所有都勾选了
							//让全选选中
							allCheck.checked = true;
						}
					})
				}
			})
		</script>
		<script type="text/javascript">
			//undefined可以当成false
			var allCheck2 = document.querySelector("input");
			if(allCheck2){
				window.console.log("博为峰");
			}else{
				console.log("学掌门");
			}
		</script>
	</body>
</html>
